<template>
  <div class="addOrg">
    <el-button type="primary" :icon="Plus" @click="updateDialog = true"
      >添加</el-button
    >
  </div>

  <!-- 组织列表表格 -->
  <el-table
    :data="tableData"
    row-key="id"
    lazy
    :loading="loading"
    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
  >
    <el-table-column prop="id" label="id" width="80" align="center" />
    <el-table-column
      prop="organizationName"
      label="组织名称"
      width="250"
      align="center"
    />
    <el-table-column
        prop="legalPerson"
        label="法人"
        width="80"
        align="center"
    />
    <el-table-column
      prop="organizationTel"
      label="联系电话"
      align="center"
    />
    <el-table-column prop="establishDate" label="成立日期" align="center" />
    <el-table-column
        prop="organizationAddress"
        label="组织地址"
        width="450"
        align="center"
    >
      <template #default="scope">
        <span :title="scope.row.organizationAddress">{{
            scope.row.organizationAddress
          }}</span>
      </template>
    </el-table-column>
    <el-table-column  label="状态" fixed="right" align="center">
      <template v-slot="scope">
        <el-switch
          size="small"
          v-model="scope.row.status"
          @click="updateStatus(scope.row.id, scope.row.status)"
        />
      </template>
    </el-table-column>
    <el-table-column label="操作" fixed="right">
      <template #default="scope">
        <div style="display: flex; gap: 20px">
          <el-link
              type="primary"
              icon="edit"
              @click="updateFormVisible(scope.row)"
          >修改</el-link
          >
          <el-link
              type="primary"
              icon="delete"
              @click="ORdelete(scope.row)"
              :disabled="isDisable"
          >删除</el-link
          >
        </div>
      </template>
    </el-table-column>
  </el-table>
  <!-- 添加组织开始 -->
  <organizationAdd
    v-model:updateDialog="updateDialog"
    @updateList="getList"
    v-if="updateDialog"
  />
  <!-- 添加组织结束 -->
  <!-- 修改组织开始 -->
  <organizationUpdate
    v-model:addDialog="addDialog"
    :updateForm="updateForm"
    v-if="addDialog"
  />
  <!-- 修改组织开始 -->
</template>

<script setup>
import { Edit, Delete, Plus } from "@element-plus/icons-vue";
import axios from "@/axios/index";
import { onMounted, reactive, ref } from "vue";
import { ElMessageBox,ElMessage,ElTable } from "element-plus";
import organizationUpdate from "./OrganizationUpdate.vue";
import organizationAdd from "./OrganizationAdd.vue";

let updateDialog = ref(false);

let loading = ref("true");

const addDialog = ref(false);

//修改组织的对应信息
const updateForm = ref({
  organizationName: "",
  organizationAddress: "",
  organizationTel: "",
  organizationDesc: "",
  organizationUrl: "",
  establishDate: "",
  legalPerson: "",
  status: 1,
  id: "",
});

//修改组织功能
const updateFormVisible = (form) => {
  updateForm.value.organizationName = form.organizationName;
  updateForm.value.organizationAddress = form.organizationAddress;
  updateForm.value.organizationTel = form.organizationTel;
  updateForm.value.organizationDesc = form.organizationDesc;
  updateForm.value.organizationUrl = form.organizationUrl;
  updateForm.value.establishDate = form.establishDate;
  updateForm.value.legalPerson = form.legalPerson;
  updateForm.value.status = form.status ? 1 : 0;
  addDialog.value = true;
  updateForm.value.id = form.id;
};

// 一级展示数据
let tableData = reactive([]);
let isDisable = ref(false);

// 获取组织数据
function getList() {
  loading.value = "true";
  axios.get("/organization/getList").then((res) => {
    loading.value = "false";
    tableData = res.data.data;
    fn(tableData);
  });
}

function fn(arr) {
  for (let i = 0; i < arr.length; i++) {
    if (arr[i].children != null) {
      fn(arr[i].children);
    }
    if (arr[i].status === 1) {
      arr[i].status = true;
    } else {
      arr[i].status = false;
    }
  }
}

onMounted(() => getList());

//组织删除
function ORdelete(row) {
  ElMessageBox.confirm("该操作将永久删除数据,请确认是否继续操作?", "系统提示", {
    confirmButtonText: "确认",  
    cancelButtonText: "取消",  
    type: "warning",  
  }).then(() => {
    axios.delete("/organization", {
        params: {
          id: row.id,
        },
      })
      .then((resp) => {
        ElMessage({
          message: resp.data.message,
          type: "success",
          duration: 1500,
          onClose: function () {
            isDisable.value = false;
            getList();
          },
        });
      });
  })
}

//状态修改
let updateStatus = function (id, status) {
  if (status) {
    status = false;
  } else {
    status = true;
  }

  axios
    .get(`/organization/updateStatus`, {
      params: {
        id,
        status: status ? "0" : "1",
      },
    })
    .then((response) => {
      getList();
    });
};
</script>

<style scoped>


.addOrg {
  display: flex;
  width: 100%;
  justify-content: start;
  margin-bottom: 10px;
}
</style>